<template>
  <view class="paypassword">
    <u-form ref="ruleForm">
      <u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="旧密码:" prop="password">
        <u-input placeholder="请输入旧密码" :placeholderStyle="placeholderStyle" v-model="form.password" type="password">
        </u-input>
      </u-form-item>
      <u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="新密码:" prop="pay">
        <u-input placeholder="请输入新的密码" :placeholderStyle="placeholderStyle" v-model="form.pay" type="password">
        </u-input>
      </u-form-item>
      <u-form-item :labelStyle="labelStyle" label-position="left" label=" 确认密码:" prop="paypass" label-width="150">
        <u-input placeholder="请再次输入新密码" :placeholderStyle="placeholderStyle" v-model="form.paypass" type="password">
        </u-input>
      </u-form-item>
    </u-form>
    <view class="foot_box u-flex u-row-between u-col-center">
      <button class="u-reset-button post-btn" @tap="submit()">提交</button>
      <!-- <button class="u-reset-button contact-btn" @tap="onService">联系客服</button> -->
    </view>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapActions,
    mapState
  } from 'vuex';

  export default {
    data() {
      return {
        form: {
          password: '',
          pay: '',
          paypass: ''
        },
        labelStyle: {
          'font-size': '30rpx',
          'font-weight': '600',
          color: '#333'
        },
        placeholderStyle: 'font-size: 30rpx; font-weight: 500;color:#C2C7CF;',
      }
    },
    computed: {
      ...mapState({
        userInfo: ({
          user
        }) => user.userInfo,
      }),
    },
    methods: {
      submit() {
        let that = this;
        // this.$refs.ruleForm.validate(valid => {
        //   if (valid) {
        //     console.log('提交')
        if (that.form.pay != that.form.paypass) {
          uni.showToast({
            title: '两次密码输入不一致',
            icon: 'none',
            success() {
              return
            }
          })
        }
        that.$http('user.changePwd', {
          id: that.userInfo.id,
          password_origin: that.form.password,
          password: that.form.pay,
          password_again: that.form.paypass
        }).then(res => {
          if (res.code === 1) {
            uni.showToast({
              title: '设置成功',
              icon: 'none',
              success() {
                setTimeout(function() {
                  that.$Router.back();
                }, 700)
              }
            })
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        })
        //   } else {
        //     console.log('错误')
        //   }
        // });

      }
    },
    onReady() {
      // this.$refs.ruleForm.setRules(this.rules);
    },

  }
</script>

<style lang="scss">
  .paypassword {
    width: 96%;
    margin: 20rpx auto;
    padding: 0 30rpx;
    border-radius: 10rpx;
    background-color: #fff;
    height: 90%
  }

  // 底部按钮
  .foot_box {
    height: 100rpx;
    width: 100%;
    margin-top: 70%;

    .contact-btn {
      width: 340rpx;
      line-height: 74rpx;
      background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
      box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
      border-radius: 35rpx;
      font-size: 28rpx;

      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }

    .post-btn {
      width: 340rpx;
      margin: 0 auto;
      line-height: 74rpx;
      background: linear-gradient(90deg, #FA6E3F, #FEAB55);
      box-shadow: 0px 7rpx 6rpx 0rpx rgba(229, 138, 0, 0.22);
      border-radius: 37rpx;
      font-size: 28rpx;

      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
  }
</style>
